<template>
  <view class="order-container">
    <!-- 状态筛选栏 - 使用uView的tabs组件 -->
    <u-sticky>
		<view style="background: #fff; padding: 10rpx 30rpx;">
			<u-tabs
			  :list="tabs" 
			  :current="currentTab" 
			  @change="changeTab"
			  activeColor="#007aff"
			  inactiveColor="#606266"
			  bgColor="#ffffff"
			  height="80"
			  fontSize="28"
			></u-tabs>
		</view>
		
	</u-sticky>
    
    <!-- 订单列表 -->
    <view class="order-list">
      <view 
        class="order-card" 
        v-for="item in orderList" 
        :key="item.id"
        @click="navigateToDetail(item.id)"
      >
        <!-- 订单头部 -->
        <view class="order-header">
          <text class="order-no">订单编号：{{ item.order_no }}</text>
          <u-tag 
            :text="item.status_text" 
            :type="getStatusType(item.order_status)"
            size="mini"
            shape="circle"
          />
        </view>
        
        <!-- 订单内容 -->
        <view class="order-content">
          <u--image 
            :src="item.school_image || '/static/images/school-default.png'" 
            width="120rpx" 
            height="120rpx" 
            radius="8"
            mode="aspectFill"
          ></u--image>
          <view class="order-info">
            <text class="school-name">{{ item.school_name }}</text>
            <text class="course-info">
              {{ item.student_name }} · {{ item.course_type }}
            </text>
            <text class="order-time">{{ item.create_time }}</text>
          </view>
          <view class="price-box">
            <text class="price">¥{{ item.total_fee }}</text>
          </view>
        </view>
        
        <!-- 订单底部按钮 -->
        <view class="order-footer">
          <text class="payment-time" v-if="item.payment_time">支付时间：{{ item.payment_time }}</text>
          <view class="action-buttons">
            <u-button 
              v-if="item.order_status === 0" 
              type="error" 
              size="mini"
              plain
              @click.stop="handlePay(item.id)"
            >
              立即支付
            </u-button>
            <u-button 
              v-if="item.order_status === 1" 
              type="primary" 
              size="mini"
              plain
              @click.stop="contactService"
            >
              联系客服
            </u-button>
            <u-button 
              v-if="item.order_status !== 3" 
              type="info" 
              size="mini"
              plain
              @click.stop="showCancelDialog(item)"
            >
              {{ item.order_status === 0 ? '取消订单' : '申请退款' }}
            </u-button>
          </view>
        </view>
      </view>
      
      <!-- 加载状态 - 使用uView的loadmore组件 -->
      <u-loadmore 
        :status="loadStatus" 
        :icon-type="iconType"
        :load-text="loadText"
        margin-top="30"
        margin-bottom="30"
      />
    </view>
    
    <!-- 取消订单弹窗 - 使用uView的modal组件 -->
    <u-modal 
      v-model="showCancelModal" 
      :title="modalTitle"
      :content="modalContent"
      :show-cancel-button="true"
      @confirm="confirmCancel"
      @cancel="closeCancelDialog"
    ></u-modal>
    
    <!-- 退款原因输入框 - 使用uView的popup和input组件 -->
    <u-popup 
      v-model="showRefundReason" 
      mode="center" 
      border-radius="16"
      width="80%"
    >
      <view class="refund-popup">
        <view class="popup-header">
          <text class="popup-title">请输入退款原因</text>
          <u-icon 
            name="close" 
            size="24" 
            color="#999" 
            @click="showRefundReason = false"
          ></u-icon>
        </view>
        <u--input 
          v-model="refundReason" 
          placeholder="请简要说明退款原因"
          border="none"
          type="textarea"
          height="200"
          maxlength="200"
          :adjust-position="false"
        ></u--input>
        <u-button 
          type="primary" 
          shape="circle"
          @click="submitRefund"
          :disabled="!refundReason.trim()"
        >
          提交申请
        </u-button>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { name: '全部', value: 'all' },
        { name: '待付款', value: 0 },
        { name: '已支付', value: 1 },
        { name: '已取消', value: 3 },
		{ name: '已退款', value: 4 }
      ],
      currentTab: 0,
      orderList: [],
      page: 1,
      pageSize: 10,
      loadStatus: 'loadmore',
      iconType: 'flower',
      loadText: {
        loadmore: '上拉加载更多',
        loading: '正在加载...',
        nomore: '没有更多了'
      },
      
      // 弹窗相关
      showCancelModal: false,
      modalTitle: '提示',
      modalContent: '确定要取消该订单吗？',
      currentOrder: null,
      
      // 退款相关
      showRefundReason: false,
      refundReason: ''
    }
  },
  onLoad() {
    this.loadOrders()
  },
  onReachBottom() {
    if (this.loadStatus === 'loadmore') {
      this.page++
      this.loadOrders()
    }
  },
  methods: {
    async loadOrders() {
      if (this.loadStatus === 'loading') return
      
      this.loadStatus = 'loading'
      
      try {
		  const data = {
			  page: this.page,
			  pageSize: this.pageSize,
			  status: this.tabs[this.currentTab].value
		  }
		const res = await this.$api.get('/DrivingSchool/orderList',data,true)
        
        
        if (res.data.code === 200) {
          if (this.page === 1) {
            this.orderList = res.data.data.list
          } else {
            this.orderList = [...this.orderList, ...res.data.data.list]
          }
          
          this.loadStatus = res.data.data.has_more ? 'loadmore' : 'nomore'
        }
      } catch (error) {
        this.loadStatus = 'loadmore'
        this.$u.toast('加载失败')
      }
    },
    
    changeTab(e) {
		console.log('dasdadas',e.index)
      if (this.currentTab !== e.index) {
        this.currentTab = e.index
        this.page = 1
        this.loadStatus = 'loadmore'
        this.loadOrders()
      }
    },
    
    getStatusType(status) {
      const typeMap = {
        0: 'warning',
        1: 'success',
        2: 'primary',
        3: 'error',
        4: 'info'
      }
      return typeMap[status] || 'info'
    },
    
    navigateToDetail(orderId) {
      uni.navigateTo({
        url: `/pages/order/detail?id=${orderId}`
      })
    },
    
    handlePay(orderId) {
      uni.navigateTo({
        url: `/pages/payment/index?orderId=${orderId}`
      })
    },
    
    showCancelDialog(order) {
      this.currentOrder = order
      if (order.order_status === 0) {
        this.modalTitle = '取消订单'
        this.modalContent = '确定要取消该订单吗？'
      } else {
        this.modalTitle = '申请退款'
        this.modalContent = '确定要申请退款吗？'
      }
      this.showCancelModal = true
    },
    
    closeCancelDialog() {
      this.showCancelModal = false
      this.currentOrder = null
    },
    
    confirmCancel() {
      if (this.currentOrder.order_status === 0) {
        this.cancelOrder()
      } else {
        this.showRefundReason = true
      }
    },
    
    async cancelOrder() {
      try {
        const res = await this.$u.api.order.cancel({
          order_id: this.currentOrder.id
        })
        
        if (res.code === 200) {
          this.$u.toast('取消成功')
          this.page = 1
          this.loadOrders()
        }
      } catch (error) {
        this.$u.toast('取消失败')
      } finally {
        this.closeCancelDialog()
      }
    },
    
    async submitRefund() {
      try {
        const res = await this.$u.api.order.refund({
          order_id: this.currentOrder.id,
          reason: this.refundReason
        })
        
        if (res.code === 200) {
          this.$u.toast('退款申请已提交')
          this.showRefundReason = false
          this.refundReason = ''
          this.page = 1
          this.loadOrders()
        }
      } catch (error) {
        this.$u.toast('提交失败')
      }
    },
    
    contactService() {
      uni.makePhoneCall({
        phoneNumber: '400-123-4567'
      })
    }
  }
}
</script>

<style scoped lang="scss">
.order-container {
  background-color: #f7f7f7;
  min-height: 100vh;
  padding-bottom: 30rpx;
}

.order-list {
  padding: 20rpx;
}

.order-card {
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.order-no {
  font-size: 24rpx;
  color: #999;
}

.order-content {
  display: flex;
  padding: 24rpx;
}

.order-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 20rpx;
}

.school-name {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.course-info {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.order-time {
  font-size: 24rpx;
  color: #999;
}

.price-box {
  display: flex;
  align-items: center;
  margin-left: 20rpx;
}

.price {
  font-size: 32rpx;
  font-weight: bold;
  color: #ff5a5f;
}

.order-footer {
  padding: 20rpx 24rpx;
  border-top: 1rpx solid #f5f5f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.payment-time {
  font-size: 24rpx;
  color: #999;
}

.action-buttons {
  display: flex;
  
  .u-button {
    margin-left: 20rpx;
  }
}

.refund-popup {
  padding: 30rpx;
  
  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .popup-title {
      font-size: 32rpx;
      font-weight: bold;
    }
  }
  
  .u-button {
    margin-top: 30rpx;
  }
}
</style>